<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% String path = request.getContextPath();%>

<html>
<head>
    <title>分类</title>
    <script src="<%=path%>/jq/jquery-3.3.1.js"></script>
    <link href="<%=path%>/css2/bootstrap.css" rel="stylesheet">
    <script src="<%=path%>/js2/bootstrap.js" rel="stylesheet"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/default.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/search-form.css">
    <style>
        html {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        a, a:hover {
            color: #FFF;
            text-decoration: none;
        }

        *, *:before, *:after {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            padding: 0px;
            margin: 0px;
            background: url(<%=path%>/img/image.jpg);
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
            background-repeat: no-repeat;
        }


        nav ul {
            list-style: none;
            padding-left: 0;
            margin-top: 0;
            margin-bottom: 0;
        }

        .nav {
            width: 1021px;
            /*margin: 0 auto;*/
            /*background: dimgrey;*/
            margin-top: 10px;
            /*padding-left: 10px;*/
            /*margin-right: 0px;*/
            color: bisque;
        }

        .nav a {
            display: block;
            padding: 0 16px;
            line-height: inherit;
            cursor: pointer;
        }

        .nav_menu {
            margin: 0 auto;
            line-height: 45px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .nav_menu-item {
            display: inline-block;
            position: relative;
            width: 200px;
        }

        .nav_menu-item:hover {
            background-color: #9b59b6;
        }

        .nav_menu-item:hover .nav_submenu {
            display: block;
        }

        .nav_submenu {
            font-weight: 300;
            text-transform: none;
            display: none;
            position: absolute;
            width: 200px;
            background-color: #9b59b6;
        }

        .nav_menu-item2 {
            display: inline-block;
            position: relative;
            width: 200px;
        }

        .nav_menu-item2:hover {
            background-color: darksalmon;
        }


        .nav_menu-item2:hover .nav_submenu2 {
            display: inline-block;
            left: 200px;
        }

        .nav_submenu2 {
            font-weight: 300;
            text-transform: none;
            display: none;
            position: absolute;
            width: 250px;
            background-color: darkturquoise;
        }

        .nav_submenu-item:hover {
            background: rgba(0, 0, 0, 0.1);
        }

    </style>
</head>
<body>
<div>
    <nav class="nav">
        <ul class="nav_menu">
            <li class="nav_menu-item"><a href="http://localhost:8080/" target="_blank">Home</a></li>
            <c:forEach items="${Type}" var="one" varStatus="status">
                <li id="${status.count}" onmouseover="fun()" class="nav_menu-item">${one.typeName}
                    <ul class="nav_submenu">
                        <c:forEach items="${one.nextType}" var="it">
                            <li class="nav_submenu-item2 nav_menu-item2">${it.modelname}
                                <ul class="nav_submenu2">
                                    <c:forEach items="${it.brandname}" var="item">
<%--                                        放a标签地址 传参数--%>
                                        <li class="nav_submenu-item"><a href="#"></a>>${item}</li>
                                    </c:forEach>

                                </ul>
                            </li>
                        </c:forEach>
                    </ul>
                </li>
            </c:forEach>

        </ul>
    </nav>

<%--搜索框 暂时没用--%>
    <form onsubmit="submitFn(this, event);">
        <div class="search-wrapper">
            <div class="input-holder">
                <input type="text" class="search-input" placeholder="Type to search"/>
                <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
            </div>
            <span class="close" onclick="searchToggle(this, event);"></span>
<%--            <div class="result-container">--%>

<%--            </div>--%>
        </div>
    </form>
<%--    body部分--%>
    <div style="background-color: white ;height: 500px ;margin-top: 50px">
        <iframe width="100%" height="100%" id="iframe_test" src="">


        </iframe>
    </div>

</div>
<%--添加 删除 模态框--%>
<div  style="position: absolute; bottom: 0px;  text-align:center; display: block; width: 100%;">
    <button class="btn btn-warning" onclick="add()">添加</button>
    <button class="btn btn-warning" onclick="forbiden()">禁用</button>
</div>

<%--添加模态框--%>
<div id="modeledit" class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加分类</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addForm" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label>Type</label>
                        <input type="text" class="form-control" id="updateType" placeholder="必填">
                        <label>model</label>
                        <input type="text" class="form-control" id="updatemodel"placeholder="必填">
                        <label>brand</label>
                        <input type="text" class="form-control" id="updatebrand"placeholder="必填">
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="add_do()">保存</button>
            </div>
        </div>
    </div>
</div>

<%--删除模态框--%>
<div id="modeldelete" class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加分类</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="forbidenType" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label>brand</label>
                        <input type="text" class="form-control" id="forbidenbrand">
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="forbiden_do()">保存</button>
            </div>
        </div>
    </div>
</div>

<script>

    function add() {
        $("#modeledit").modal("show");//弹模态框
    }

    //添加Type
    function add_do() {
        console.log("发送请求")
        $.ajax({
            url: "${pageContext.request
           .contextPath}/classify/addType",
            method: "post",
            // dataType:'json',
            data: {
                Type: $("#updateType").val(),
                Model: $("#updatemodel").val(),
                brand: $("#updatebrand").val(),

            },
            success: function (data) {
                if (data == "ok") {
                    alert("修改成功");
                    parent.location.reload(); //刷新父层
                    layer_close();//关闭本层
                }
            },
            error: function () {
                alert("失败")
            },
        })
    }

    function forbiden() {
        $("#modeldelete").modal("show");//弹模态框
    }

    //禁用Type
    function forbiden_do() {
        console.log("发送请求")
        $.ajax({
            url: "${pageContext.request
           .contextPath}/classify/addType/deleteType",
            method: "post",
            // dataType:'json',
            data: {
                brand: $("#forbidenbrand").val(),
            },
            success: function (data) {
                if (data == "ok") {
                    alert("禁用成功");
                    parent.location.reload(); //刷新父层
                    layer_close();//关闭本层
                }
            },
            error: function () {
                alert("失败")
            },
        })
    }
</script>





<script type="text/javascript">
    function searchToggle(obj, evt) {
        var container = $(obj).closest('.search-wrapper');

        if (!container.hasClass('active')) {
            container.addClass('active');
            evt.preventDefault();
        } else if (container.hasClass('active') && $(obj).closest('.input-holder').length == 0) {
            container.removeClass('active');
            // clear input
            container.find('.search-input').val('');
            // clear and hide result container when we press close
            container.find('.result-container').fadeOut(100, function () {
                $(this).empty();
            });
        }
    }

    function submitFn(obj, evt) {
        value = $(obj).find('.search-input').val().trim();

        _html = "Yup yup! Your search text sounds like this: ";
        if (!value.length) {
            _html = "Yup yup! Add some text friend :D";
        } else {
            _html += "<b>" + value + "</b>";
        }

        $(obj).find('.result-container').html('<span>' + _html + '</span>');
        $(obj).find('.result-container').fadeIn(100);

        evt.preventDefault();
    }
</script>

</body>